<!--  -->
<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true"
               :model="dataForm">
        <!-- <el-form-item>
          <el-input placeholder="key" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="value" clearable></el-input>
        </el-form-item> -->

        <el-form-item label="">
          <el-input type="textarea"
                    style="width: 500px;"
                    v-model="dataForm.jsonData"></el-input>
        </el-form-item>
        <el-button @click="submit()"
                   type="primary">确定</el-button>

        <el-button @click="showImg()"
                   type="primary">上传图片</el-button>
      </el-form>
    </el-card>
    <el-card class="box-card"
             style="margin-top: 10px">
      <el-table :data="dataList"
                border>
        <el-table-column type="index"
                         label="序号"
                         align="center">
        </el-table-column>
        <el-table-column prop="key"
                         label="标题"
                         align="center">
        </el-table-column>
        <el-table-column prop="value"
                         label="值"
                         align="center">
        </el-table-column>
        <el-table-column prop="xy"
                         label="坐标"
                         align="center"> </el-table-column>

        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button type="primary"
                       size="small"
                       @click="addXy(scope.row,scope)">添加坐标</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="dialog-footer">
        <el-button @click="isShowUploadImg = false">取 消</el-button>
        <el-button type="primary"
                   @click="isShowUploadImg = false">确 定</el-button>
      </div>

    </el-card>

    <el-dialog title="选择坐标"
               :visible.sync="dialogFormVisible">
      <div @click="getMouseXY($event)"
           class="btn_class">
        <img :src="imageUrl"
             class="avatar">
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="上传图片"
               :visible.sync="isShowUploadImg">
      <el-upload class="avatar-uploader"
                 :action="uploadUrl"
                 :show-file-list="false"
                 :on-success="handleAvatarSuccess">
        <img v-if="imageUrl"
             :src="imageUrl"
             class="avatar">
        <i v-else
           class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="isShowUploadImg = false">取 消</el-button>
        <el-button type="primary"
                   @click="isShowUploadImg = false">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogFormVisible: false,
      isShowUploadImg: false,
      index: "",
      dataForm: {
        jsonData: "[{\"key\":\"标签名称\",\"value\":\"A标签\"},{\"key\":\"标签字段\",\"value\":\"AABianqian\"},{\"key\":\"标签口径\",\"value\":\"口径\"},{\"key\":\"加载路径\",\"value\":\"/home/cpcp\"},{\"key\":\"上线时间\",\"value\":\"A标签\"},{\"key\":\"上线时间\",\"value\":\"2021-8-2 16:56:19\"}]"
      },
      dataList: [

      ],
      uploadUrl: 'http://localhost:8501/cpcp/api/upload',
      imageUrl: '/uploadFile/f7872232-4f37-4c44-8af9-35092559bf6f.jpeg',

    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {
    if (this.dataForm.jsonData) {
      this.submit()
    }

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () { },
  methods: {
    showImg () {
      this.isShowUploadImg = !this.isShowUploadImg
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    //获取坐标
    getMouseXY (event) {
      console.log(event.clientX, event.clientY);
      console.info(this.dataList[this.index])
      this.dataList[this.index]['xy'] = event.clientX + ',' + event.clientY
    },
    //点击确定
    submit () {
      this.dataList = JSON.parse(this.dataForm.jsonData)
    },
    addXy (row, index) {
      console.info(index.$index)
      this.dialogFormVisible = !this.dialogFormVisible
      this.index = index.$index
    }
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.btn_class {
  /* width: 80%;
  height: 500px;
  border: 1px solid red; */
}
</style>